// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'vars/lib' as *;

.m24-c-donate {
    @include container;
    @include grid;
    color: $m24-color-black;
    padding-top: $spacer-xl;
    padding-bottom: $spacer-xl;
    gap: $spacer-lg $grid-gutter;
    grid-template-columns: repeat(1, 1fr);
}

.m24-c-donate-title {
    font-size: $text-title-xl;
    text-wrap-style: balance;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1;
}

.m24-c-donate-media {
    img {
        display: block;
    }
}

.m24-c-donate-info {
    font-size: $text-body-md;

    p:last-of-type {
        margin-bottom: 0;
    }
}

.m24-c-donate-cta {
    margin-bottom: 0;
    text-align: end;
}

@media #{$mq-lg} {
    .m24-c-donate {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: min-content min-content auto;
        row-gap: 0;
    }

    .m24-c-donate-title {
        grid-column: 1/7;
        margin-bottom: $spacer-sm;
    }

    .m24-c-donate-media {
        grid-column: 8/13;
        grid-row: 1/3;
    }

    .m24-c-donate-info {
        grid-column: 1/7;
        grid-row: 2/4;
    }

    .m24-c-donate-cta {
        grid-column: 8/13;
        padding-top: $spacer-lg;
    }
}
